<template>
    <div>
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide style="height:200px">I'm Slide 1</swiper-slide>
            <swiper-slide style="height:100px">I'm Slide 2</swiper-slide>
            <swiper-slide style="height:300px">I'm Slide 3</swiper-slide>
            <swiper-slide style="height:400px">I'm Slide 4</swiper-slide>
            <swiper-slide style="height:200px">I'm Slide 5</swiper-slide>
            <swiper-slide style="height:100px">I'm Slide 6</swiper-slide>
            <swiper-slide style="height:200px">I'm Slide 7</swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
            <div class="swiper-scrollbar"   slot="scrollbar"></div>
        </swiper>
        <div>
            <p>test</p>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'message',
      data () {
        return {
            swiperOption: {
              autoHeight: true,
              pagination : '.swiper-pagination',
              paginationClickable :true,
              prevButton:'.swiper-button-prev',
              nextButton:'.swiper-button-next',
              onTransitionStart(swiper){
                console.log(swiper)
            }
        }
        }
        },
        mounted() {
            console.log('this is current swiper instance object', this.swiper)
        }
    }

</script>

<style lang="css" scoped>
</style>